<template>
  <UModal v-model="isOpen" :ui="{ width: 'sm:max-w-lg' }" class="responsive-modal">
    <div class="p-6">
      <div class="flex items-center justify-center mb-6">
        <UIcon name="i-heroicons-information-circle" class="h-12 w-12 text-primary-500 mr-3" />
        <h2 class="text-xl font-bold text-gray-900">演示项目提示</h2>
      </div>
      
      <div class="space-y-4 mb-6">
        <div class="p-4 bg-blue-50 rounded-lg border border-blue-100">
          <h3 class="font-medium text-blue-800 mb-2 flex items-center">
            <UIcon name="i-heroicons-information-circle" class="h-5 w-5 mr-2" />
            项目说明
          </h3>
          <p class="text-gray-700">欢迎使用我们的演示环境！本项目仅作为功能展示，部分高级功能可能受到限制。</p>
        </div>
        
        <div class="p-4 bg-amber-50 rounded-lg border border-amber-100">
          <h3 class="font-medium text-amber-800 mb-2 flex items-center">
            <UIcon name="i-heroicons-exclamation-triangle" class="h-5 w-5 mr-2" />
            功能限制
          </h3>
          <ul class="text-gray-700 list-disc list-inside space-y-1">
            <li>部分模块功能还没有进行开发</li>
            <li>部分数据出现请求错误</li>
            <li>数据可能会定期重置</li>
          </ul>
        </div>
        
        <div class="p-4 bg-green-50 rounded-lg border border-green-100">
          <h3 class="font-medium text-green-800 mb-2 flex items-center">
            <UIcon name="i-heroicons-light-bulb" class="h-5 w-5 mr-2" />
            开发者说
          </h3>
          <p class="text-gray-700">目前可以进行体验浏览部分功能,针对于现有功能和其他建议请前往右上角点击头像->我的反馈->提交反馈留下您的宝贵意见。</p>
        </div>
      </div>
      
      <div class="flex items-center justify-between">
        <UCheckbox v-model="dontShowAgain" label="不再提示" />
        <UButton color="primary" @click="closeModal">我知道了</UButton>
      </div>
    </div>
  </UModal>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const isOpen = defineModel<boolean>('modelValue', { required: true })
const dontShowAgain = ref(false)

// 定义事件
const emit = defineEmits(['close'])

// 导入路由相关函数
import { useRouter } from 'vue-router'

// 获取路由实例
const router = useRouter()

// 关闭模态框
const closeModal = () => {
  isOpen.value = false
  
  // 如果选择了不再提示，则保存到本地存储
  if (dontShowAgain.value) {
    localStorage.setItem('demoProjectModalDismissed', 'true')
  }
  
  emit('close')
  
  // 跳转到首页
  router.push('/')
}

// 检查是否应该显示模态框
onMounted(() => {
  // 如果用户之前选择了不再提示，则不显示模态框
  const isDismissed = localStorage.getItem('demoProjectModalDismissed') === 'true'
  if (isDismissed) {
    isOpen.value = false
  }
})
</script>

<style scoped>
/* 移动端响应式样式 */
@media only screen and (max-width: 600px) {
  .responsive-modal {
    width: 95% !important;
    margin: 0 auto;
  }
  
  .p-6 {
    padding: 1rem !important;
  }
  
  .text-xl {
    font-size: 1.1rem !important;
  }
  
  /* 优化图标大小 */
  .h-12.w-12 {
    height: 2.5rem !important;
    width: 2.5rem !important;
  }
  
  /* 优化内容区域间距 */
  .space-y-4 {
    gap: 0.75rem !important;
  }
  
  /* 优化内容卡片内边距 */
  .p-4 {
    padding: 0.75rem !important;
  }
  
  /* 优化按钮和复选框布局 */
  .flex.items-center.justify-between {
    flex-direction: column-reverse;
    gap: 1rem;
  }
  
  .flex.items-center.justify-between .UButton {
    width: 100%;
  }
}
</style>